<template>
	<view>
		<!--header-->
		<view class="tui-header-box">
			<view class="tui-header" :style="{width:width+'px',height:height+'px'}">
				<view class="tui-back" :style="{marginTop:arrowTop+'px'}" @tap="back">
					<tui-icon name="arrowleft" :size="28" color="#000"></tui-icon>
				</view>
				<view :style="{marginTop:arrowTop+'px'}" class="search-box">
					<view class="tui-searchbox tui-search-mr" @tap="search(defaultOptions.searchKeyword)">
						<!-- :style="{marginTop:inputTop+'px'}" -->
						<!-- #ifdef APP-PLUS || MP -->
						<icon type="search" :size='13' color='#999'></icon>
						<!-- #endif -->
						<text class="tui-search-text" v-if="!defaultOptions.searchKeyword">搜索商品</text>
						<view class="tui-search-key" v-if="defaultOptions.searchKeyword">
							<view class="tui-key-text">{{defaultOptions.searchKeyword}}</view>
							<tui-icon name="shut" :size='12' color='#fff'></tui-icon>
						</view>
					</view>
					<!-- 切换商品列表样式 -->
					<view class="tui-top-item switchStyle" @tap="screen">
						<tui-icon 
							:name="defaultOptions.isList?'manage':'listview'" 
							:size="defaultOptions.isList? 22 : 18" 
							:bold="defaultOptions.isList?false:true" color="#333">
						</tui-icon>
					</view>
					<!-- 切换商品列表样式 -->
				</view>
			</view>
			
			<view style="display: flex;justify-content: space-between;line-height: 50px;font-size: 10pt;text-align: center;">
<!-- 				<view style="width: 250rpx;" @tap="catsChangeHandler">
					分类筛选
				</view> -->
				<view class="sort">
					<view style="position: relative;padding-right: 20rpx;"
						v-for="(item,index) in defaultOptions.orderKey"
						:class="active===index?'actove':''" @click="sortselect(index)">
						<text>{{item.name}}</text>
						<image :src="img_url+'unmy-hotel.png'" mode="" 
							style="width: 35rpx;height: 35rpx;display: block;position: absolute;top: 35rpx;right: -20rpx;"></image>
					</view>
				</view>
			</view>
			
		</view>
		
		<!--header-->
		
		<unipopup v-for="(item,index) in defaultOptions.orderKey" :ref="'orderPopup'+item.key" type="top">
			<view  class="goods_sort" style="margin-top: 180rpx;">
				<view v-for="(itm,idx) in defaultOptions.orderType" :key='idx'
				@click="orderChange(index,itm)" 
				:class="item.value===itm.value?'sortClass':''" 
				style="text-align: center;height: 100rpx;line-height: 100rpx;border-bottom: 0.5px solid #f2f5f9;">{{itm.name}}</view>
			</view>
		</unipopup>
	</view>
	
	
</template>

<script>
	import unipopup from '@/components/uni-popup/uni-popup';
	import tuiIcon from "@/components/icon/icon";
	import tuiDrawer from "@/components/drawer/drawer";
	import tuiTopDropdown from "@/components/top-dropdown/top-dropdown";
	
	export default {
		name:"com-goods-list-header",
		components:{
			unipopup,
			tuiIcon,
			tuiDrawer,
			tuiTopDropdown,
		},
		props:{
			options:{
				type:Object,
				default:function () {
					return {
						searchKeyword:"",//搜索框关键字
						isList:'',	//是否以列表展示  | 列表或大图
						searchPageUrl:'',//搜索页面的链接,点击搜索框后跳转的页面
						goodsListPage:'',//商品列表页面的链接。确认搜索后跳转的页面
					}
				}
			},
		},
		data() {
			return {
				defaultOptions:{//默认配置，options没有值时，使用该配置
					searchKeyword:'',
					isList:false,
					searchPageUrl:'/pages/search/search',
					goodsListPage:'/pages/goods/list',
					orderKey:[
						{
							key:'price',
							name:'价格',
							value:''
						},
						{
							key:'sales',
							name:'销量',
							value:''
						}
					],
					orderType:[
						{name:'全部',value:''},
						{name:'由低到高',value:'asc'},
						{name:'由高到低',value:'desc'},
					],
				},
				img_url: this.$api.img_url,
				width: 200, //header宽度
				height: 64, //header高度
				inputTop: 0, //搜索框距离顶部距离
				arrowTop: 0, //箭头距离顶部距离
				dropScreenH: 0, //下拉筛选框距顶部距离
				active:''
			};
		},
		created(){
			this.defaultOptions = {...this.defaultOptions,...this.options};
			
			let obj = {};
			// #ifdef MP-WEIXIN
			obj = wx.getMenuButtonBoundingClientRect();
			// #endif
			// #ifdef MP-BAIDU
			obj = swan.getMenuButtonBoundingClientRect();
			// #endif
			// #ifdef MP-ALIPAY
			my.hideAddToDesktopMenu();
			// #endif
			
			uni.getSystemInfo({
				success: (res) => {
					this.width = obj.left || res.windowWidth;
					this.height = obj.top ? (obj.top + obj.height + 8) : (res.statusBarHeight + 44);
					this.inputTop = obj.top ? (obj.top + (obj.height - 30) / 2) : (res.statusBarHeight + 7);
					this.arrowTop = obj.top ? (obj.top + (obj.height - 32) / 2) : (res.statusBarHeight + 6);	
					this.dropScreenH = this.height - 10;
				}
			})
		},
		methods:{
			search(keyword) {
				let url = this.defaultOptions.searchPageUrl + "?keyword=" + keyword 
					+ '&page=' + this.defaultOptions.goodsListPage;
				uni.redirectTo({url})
			},
			screen() {
				this.defaultOptions.isList = !this.defaultOptions.isList
				this.$emit("onListStyleChange",this.defaultOptions.isList)
			},
			back() {
				let routes = getCurrentPages();
				if(routes.length == 1){
					uni.redirectTo({
						url: '/pages/index/index'
					})
				}else{
					uni.navigateBack();
				}
			},
			orderChange(idx,itm){
				this.defaultOptions.orderKey.map((item,index) => {
					this.defaultOptions.orderKey[index].value = '';
				})
				this.defaultOptions.orderKey[idx].value = itm.value;
				this.$emit("onOrderChange",this.defaultOptions.orderKey);
			},
			sortselect(index){ //排序
				let refs = 'orderPopup' + this.defaultOptions.orderKey[index].key;
				let PopupObject = this.$refs[refs][0];
				
				if(this.active !== '' && this.active === index){
					//再次点击已展开的 popup，则进行关闭
					if(PopupObject.showPopup){
						this.active = '';
						PopupObject.close();
					}else{
						PopupObject.open();
					}
				}else{
					this.active = index;
					this.defaultOptions.orderKey.forEach( (item,index) =>{
						//先全部关闭
						this.$refs['orderPopup'+ item.key][0].close();
					})
					//展开对应的 popup
					PopupObject.open();
				}
			},
			catsChangeHandler(){
				let url = '/pages/cat/cat?page=' + this.defaultOptions.goodsListPage;
				// let url = this.defaultOptions.searchPageUrl + "?" //+ "?keyword=" + keyword
				// 	+ '&page=' + this.defaultOptions.goodsListPage;
				uni.redirectTo({url})
			}
		},
		watch:{
			options:{
				handler(val){
					this.defaultOptions = {...this.defaultOptions,...val};
				},
				deep:true,//开启深度监听，监听options里面的属性变化
				immediate:false
			}
		},
	}
</script>

<style lang="less">
	.tui-header-box {
		width: 100%;
		background: #fff;
		position: fixed;
		z-index: 99998;
		left: 0;
		top: 0;
	}
	.tui-header {
		display: flex;
		align-items: flex-start;
		position: relative;
	}
	.tui-back {
		margin-left: 8rpx;
		height: 32px !important;
		width: 32px !important;
		position: relative;
		top:-9rpx;
	}
	.search-box{
		flex: 1;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 30px;
	}
	.tui-searchbox {
		width: 80%;
		height: 30px;
		margin-right: 30rpx;
		border-radius: 15px;
		font-size: 9pt;
		background: #f7f7f7;
		padding: 3px 10px;
		box-sizing: border-box;
		color: #999;
		display: flex;
		align-items: center;
		overflow: hidden;
	}
	
	/* #ifdef MP-WEIXIN */
	.tui-search-mr {
		margin-right: 20rpx !important;
	}
	
	/* #endif */
	/* #ifdef MP-BAIDU */
	.tui-search-mr {
		margin-right: 20rpx !important;
	}
	
	/* #endif */
	
	.tui-search-text {
		padding-left: 16rpx;
	}
	.tui-search-key {
		max-width: 80%;
		height: 100%;
		padding: 0 16rpx;
		margin-left: 12rpx;
		display: flex;
		align-items: center;
		border-radius: 15px;
		background: rgba(0, 0, 0, 0.5);
		color: #fff;
	}
	
	.tui-key-text {
		box-sizing: border-box;
		padding-right: 12rpx;
		font-size: 9pt;
		line-height: 12px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	/* .switchStyle{
		position: absolute;
		top: 50%;
		right: 20rpx;
		transform: translateY(-50%);
	} */
	
	.switchStyle{
		margin-right: 20rpx;
	}
	
	.sort{
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: space-evenly;
		line-height: 100rpx;
	}
	.actove{color: rgb(255, 113, 4)}
	
	.goods_sort{
		width: 100%;
		z-index: 999;
		background: #fff;
		/* #ifdef H5 */
		height: 300rpx;
		margin-top: 100rpx;
		/* #endif */
		/* #ifdef  MP||APP-PLUS  */
		height: 310rpx;
		margin-top: 120rpx;
		/* #endif */
	}
	
	.sortClass{
		color: #FF7104;
		font-weight: bold;
		background: url('https://dev.mingyuanriji.cn/web/static/yellow-right.png')no-repeat;
		background-size: 5%;
		background-position: 90% 50% ;
	}
	
</style>
